<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>教师端</title>
		<link rel="stylesheet" type="text/css" href="css/teacher.css"/>
	</head>
	<body>
		<div class="container">
			帮助有志年轻人同学学习获得体面的工作和生活
		</div>
		<div>
			<div class="chatbox">
				<div id="chat">
				
				</div>
			</div>
			<input type="text" id="input" />
			<button type="button" id="fasong">发送</button>
		</div>

	</body>
	<script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
	<script>
		//聊天内容插入数据库
		$('#fasong').click(function() {
			//获取输入框的值
			const content = $('#input').val()
			//获取当前登录的用户名
			let tutor_name = sessionStorage.getItem('tutor_name')
			console.log(tutor_name);
			//发送ajax请求
			$.ajax({
				type: 'post',
				url: '/video/chat_1',
				dataType: 'json',
				data: {
					'content': content,
					'tutor_name': tutor_name,
				},
				success: function(result) {}
			})
		})
		// 从数据库中获取聊天内容，每隔1秒中发送一次请求
		setInterval(function() {
			const url = `/video/select_content`
			$.get(url, data => {
				let html = ""
				data.forEach(function(item, index) {
					html += `
				<div>
				<label>${item.name}:</label>
				<span>${item.content}</span>
				</div>
				`
				})
				document.getElementById("chat").innerHTML = html
			})
			toBottom()//滚动条
		}, 100);
		//监听输入框
		document.getElementById("fasong").setAttribute("disabled", "disabled")
		$('#input').on('input propertychange',function(){
			const content=$('#input').val()
			console.log(content)
			if(!content.length){
			$('#fasong').attr("disabled","disabled" );//禁用按钮
			}else{
				$('#fasong').removeAttr("disabled");
			}		
		})
		//聊天框滚动到底部
		function toBottom() {
			let chat = document.querySelector(".chatbox")
			chat.scrollTop = chat.scrollHeight	
		}
	</script>
</html>
